<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>在线群聊</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
		<script src="https://at.alicdn.com/t/font_577691_1lsr8upd5qshh0k9.js"></script>
		<style type="text/css">
			.touxiang{    
			    border-radius: 4px;
			    margin: 16px;
			    background-size: 30px;
			    max-width: 40px;
			    max-height: 40px;
			    min-width:40px;
			    min-height:40px;}
			.chatItem{margin-top: 10px;}
			.info {max-width:80%;}
			.sendMyMessage {margin-left: 10%;}
			.otherMessage {margin-right:10%;}
			.chatItem .content{background: white;border-radius:8px;padding: 10px;text-align: left;word-break:break-all;}
			.fromchatItem .date{color:blue}
			.tochatItem .content{margin-left: 21vw;}
			.tochatItem .date{color:#008242}
			* {
				font-size:14px;
			}
			    .icon {
			       width: 1em; height: 1em;
			       vertical-align: -0.15em;
			       fill: currentColor;
			       overflow: hidden;
			    }
			    p {
			    	margin:0;
			    }
			.sendMyMessage > div > p {
				text-align: right;
			}			    
			    .tochatItem .date {
			    	margin-left:38vw;
			    }
			    .fromchatItem .date {
			    	margin-left:0;
			    }
			#content-chat  {
				overflow: auto;
				-webkit-overflow-scrolling : touch;
				position: relative;
/* 				z-index:20000; */
				z-index:1;
			}
			
			.ke-container-default {
				max-width:100vw;
			}
			.ke-statusbar {
				display: none;
			}
			.w-e-text-container {
				height:60px!important;
			}
 			.w-e-text-container .w-e-panel-container {
				/* top:-520%; */
				width: 80vw!important;
			}
			.w-e-panel-tab-content {
				height:150px!important;
			}
/* 			.w-e-text-container {
				position: static;
			} */
			.sendMyMessage img {
				float:right;
			}
			.sendMyMessage 
			.sendMyMessage > div {
				margin-left:20vw !important;
			}
			.sendMyMessage > span {
				margin-left:20vw !important;
				flex-direction: row-reverse;
			}			
			.w-e-panel-container {
/* 			    top: -40px!important; */
			    margin-left:0!important;
			}
			.w-e-toolbar {
				height:40px!important;
			}
			.glyphicon-send {
				/* height:50px!important; */
			display: flex;
			    align-items: center;
			    justify-content: center;
			}
			.w-e-menu {
				display:flex;
				align-items:center;
			}
			.w-e-text {
				background-color:white;
			}
			#content-chat svg {
				width: 30px!important;
				height: 30px!important;
				vertical-align:top!important;
			}
			.clearfix:after {
				content:"";
				display:block;
				clear:both;
			}
			#div22 {
				float:left;
			}
			.w-e-toolbar {
				border: 1px solid rgb(204, 204, 204);
				background-color: rgb(236, 236, 236)
			}
			.date {
				display:inline-flex;
				justify-content:space-between;
			}
			.disButton{color:#F8CDC2;background:#f3a495}
			.actButton{color:yellow;background: #D85940;}
			.div-c-extraTool svg{float: left;margin:3px 8px;color:gray; border:1px solid silver;padding: 8px;
			border-radius:10px;background:#f5f5f5; ;width: 45px;height:45px;}
			#redenvelope.modal, .modal-backdrop {
				position:absolute;
			}
			.contentRedPack{color:white;margin-top:5px;padding-left:60px;font-size:14px;padding-top:11px;background: url("../img/redPack/redPack3.png");background-size: 100% 100%;width: 215px;height:84px;border-radius:10px;margin-left: 14vw; cursor: pointer;}
			.contentRedPack span{position: absolute; margin-top: 38px;margin-left: -97px;font-size: 12px;color: gray;}
			.sendMyMessage {
				
			}
			.fromchatItem {
			    display: flex;
			    align-items: center;
			    justify-content: flex-end;
			}
			.otherMessage {
				justify-content: flex-start;
			}	
			.sendMyMessage {
			
			}
			.info .content {
				margin-top: 5px;
   				min-width: 160px;
			}
			.date span + span {
			    margin-left: 7px;
			    top: 1px;
			    position: relative;
			}
			.receiveRedBag {
				justify-content:flex-start;
			}
			.receiveRedBag .contentRedPack {
				margin-left:0;
			}
			.avatar {
				max-width:60px;
				max-height:60px;
			}
			.lingqurenItemImg {
				width: 32px;
				height: 32px;
			    border: 1px solid rgb(255, 232, 182);
   				border-radius: 5px;
			}
			.p-c-lingqurenItem {
				display:flex;
				align-items:center;
				justify-content:space-between;
				padding: 10px;
				margin-bottom:10px;
				border-bottom:1px solid #e1705c;
			}
			.lingqurenName {
				margin-left:16px;
			}
			#hongbaoDetaillist .jine span.smaller {
				font-size:14px!important;
				font-weight: normal!important;
			}
			.fromchatItem .content * {
				font-size:14px!important;
			}
		</style>
	</head>
	<body style="background: white;" >
 		<div id="div-i-main" class="" style="width:100%;position: relative;max-width: 690px;margin:0 auto;">
			<div class="" id="header" style="display:flex;justify-content:space-between;align-items:center;padding:11px 10px;background-color:#059BF3;width:100%;">
				<a onclick="back()" class="glyphicon glyphicon-chevron-left" style="color: white;font-size: 20px;"></a>
				<strong style="font-size: 20px;color:white;">
				<span id="span-i-customServiceStatus" style="font-size:20px;">在线群聊</span></strong>
				<a onclick="closeWebSocket()" class="glyphicon glyphicon-off" style="color: white;font-size: 20px;"></a>		
				<div class="djs" style="position: absolute ;top:60px;right:10px;height:44px;width:72px;z-index:1000;border:2px solid red; border-radius:5px;background: white;text-align: center;">
					<span style="font-size:10px!important;color:red;">红包倒计时</span>
					<spa style="font-size:10px!important;color:red;" class="daojishi">00:00:00</spa>
				</div>
			</div>
			<div id="content-chat" class="" style="background:#DFDFDF;">
			</div>
			<div class="sendMessageWrapper">
				<div class="editarea-wrapper editarea-wrapper-active">
					<svg class="icon" id="svg-i-toggleExtraTool" aria-hidden="true">
					    <use xlink:href="#icon-27CIRCLE"></use>
					</svg>	
					<div contenteditable="true" class="div-c-editArea">
					</div>
						<span class="span-c-sendNewMessage">发送</span>
				</div>
				<div class="div-c-extraTool">
					<svg class="icon w-e-menu" id="svg-i-toggleEMOJITool" aria-hidden="true">
					    <use xlink:href="#icon-smile"></use>
					</svg>
					<svg class="icon" id="svg-i-toggleRedenvelopeTool" aria-hidden="true">
					    <use xlink:href="#icon-redenvelope"></use>
					</svg>
					<div style="height: 50px;"></div>
					<div class="w-e-panel-container" contenteditable=false style="width:300px; margin-left:-150px;">
						<!-- <i class="w-e-icon-close w-e-panel-close"></i> -->
						<ul class="w-e-panel-tab-title">
						<li data-index="1" class="w-e-item w-e-active">默认</li>
						<li data-index="2" class="w-e-item">新浪</li>
						<li data-index="3" class="w-e-item">emoji</li>
						</ul>
						<div class="w-e-panel-tab-content" style="height:200px; overflow-y:auto;">
						<div class="w-e-emoticon-container w-e-emoticon-container-active" id="w-e-emoticon-container1"><span class="w-e-item">
						<img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png" alt="[坏笑]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png" alt="[舔屏]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png" alt="[污]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/moren_yunbei_org.png" alt="[允悲]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3a/moren_xiaoerbuyu_org.png" alt="[笑而不语]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/moren_feijie_org.png" alt="[费解]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/37/moren_chongjing_org.png" alt="[憧憬]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fc/moren_bbjdnew_org.png" alt="[并不简单]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif" alt="[微笑]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8a/pcmoren_cool2017_org.png" alt="[酷]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_org.gif" alt="[嘻嘻]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif" alt="[哈哈]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_org.gif" alt="[可爱]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_org.gif" alt="[可怜]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_org.gif" alt="[挖鼻]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_org.gif" alt="[吃惊]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_org.gif" alt="[害羞]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_org.gif" alt="[挤眼]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_org.gif" alt="[闭嘴]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_org.gif" alt="[鄙视]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_org.gif" alt="[爱你]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_org.gif" alt="[泪]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif" alt="[偷笑]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_org.gif" alt="[亲亲]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_org.gif" alt="[生病]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_org.gif" alt="[太开心]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_org.gif" alt="[白眼]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_org.gif" alt="[右哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_org.gif" alt="[左哼哼]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_org.gif" alt="[嘘]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif" alt="[衰]" data-w-e="1"></span></div><div id="w-e-emoticon-container2" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif" alt="[草泥马]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif" alt="[神马]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif" alt="[浮云]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif" alt="[给力]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif" alt="[围观]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif" alt="[威武]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif" alt="[熊猫]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif" alt="[兔子]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif" alt="[奥特曼]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif" alt="[囧]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif" alt="[互粉]" data-w-e="1"></span><span class="w-e-item"><img src="https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif" alt="[礼物]" data-w-e="1"></span></div><div id="w-e-emoticon-container3" class="w-e-emoticon-container" style="display:none;"><span class="w-e-item">😀</span><span class="w-e-item">😃</span><span class="w-e-item">😄</span><span class="w-e-item">😁</span><span class="w-e-item">😆</span><span class="w-e-item">😅</span><span class="w-e-item">😂</span><span class="w-e-item">😊</span><span class="w-e-item">😇</span><span class="w-e-item">🙂</span><span class="w-e-item">🙃</span><span class="w-e-item">😉</span><span class="w-e-item">😌</span><span class="w-e-item">😍</span><span class="w-e-item">😘</span><span class="w-e-item">😗</span><span class="w-e-item">😙</span><span class="w-e-item">😚</span><span class="w-e-item">😋</span><span class="w-e-item">😜</span><span class="w-e-item">😝</span><span class="w-e-item">😛</span><span class="w-e-item">🤑</span><span class="w-e-item">🤗</span><span class="w-e-item">🤓</span><span class="w-e-item">😎</span><span class="w-e-item">😏</span><span class="w-e-item">😒</span><span class="w-e-item">😞</span><span class="w-e-item">😔</span><span class="w-e-item">😟</span><span class="w-e-item">😕</span><span class="w-e-item">🙁</span><span class="w-e-item">😣</span><span class="w-e-item">😖</span><span class="w-e-item">😫</span><span class="w-e-item">😩</span><span class="w-e-item">😤</span><span class="w-e-item">😠</span><span class="w-e-item">😡</span><span class="w-e-item">😶</span><span class="w-e-item">😐</span><span class="w-e-item">😑</span><span class="w-e-item">😯</span><span class="w-e-item">😦</span><span class="w-e-item">😧</span><span class="w-e-item">😮</span><span class="w-e-item">😲</span><span class="w-e-item">😵</span><span class="w-e-item">😳</span><span class="w-e-item">😱</span><span class="w-e-item">😨</span><span class="w-e-item">😰</span><span class="w-e-item">😢</span><span class="w-e-item">😥</span><span class="w-e-item">😭</span><span class="w-e-item">😓</span><span class="w-e-item">😪</span><span class="w-e-item">😴</span><span class="w-e-item">🙄</span><span class="w-e-item">🤔</span><span class="w-e-item">😬</span><span class="w-e-item">🤐</span>
						</div></div></div>						
				</div>					
			</div>
		
		<!-- 收红包 start-->
		<div class="modal fade" id="shouhongbao" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="top:15%;margin: 0 auto;max-width:300px;min-width:300px;">
		        <div class="modal-content" style="background-color: transparent;">
		        <div style="background: url('../img/redPack/redPack1.png') ;color:#FFE8B6;background-size:100% 100% ;height: 400px;display:flex;flex-direction:column;align-items:center;">
		        	<span><button type="button" style="margin-top: -2px;font-size: 27px;margin-left: 275px;" class="close" data-dismiss="modal" aria-hidden="true">×</button></span>
		        	<img class="avatar" alt="" src="" style="width:60px;height:60px;margin-top: 20px;margin-bottom: 10px;border:3px solid #FFE8B6;border-radius:5px;"><br>
		        	<p class="nikname"></p>
		        	<p class="type"></p>
		        	<p class="desc" style="margin: 10px;font-size: 20px;margin-top: 20px;"></p>
		        	<div class="kai" data-modal="modal-2" style="position:fixed;bottom:17%;left:50%;border-radius:100px;background:#FFE8B6;height: 90px;margin-left:-45px; width: 90px;display: inline-flex;color:#2D3134;justify-content:center;align-items:center;font-size: 50px;transform-style: preserve-3d;-webkit-transform:rotateY(0deg);-webkit-transition: all 1s ease-out; ">開</div>
		        </div>
		        </div>
		    </div>
		</div>
		<!-- 收红包 end-->
		<!-- 拆红包 start-->
		<div class="modal fade" id="chaihongbao" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="top:15%;margin: 0 auto;max-width:300px;min-width:300px;">
		        <div class="modal-content" style="background-color: transparent;">
		        <div style="background: url('../img/redPack/redPack2.png') ;color:#FFE8B6;background-size:100% 100% ;height: 400px;text-align: center;">
		        	<p style="font-size: 12px;padding-top: 3px;">红包详情</p>
		        	<img alt="" class="avatar" src="" style="position:fixed;top:24px;left:50%;margin-left:-30px; height: 60px;width: 60px;margin-top: 46px;margin-bottom: 30px;border:3px solid #FFE8B6;border-radius:5px;"><br>
		        	<p class="nikname" style="margin-top: 90px;font-size:14px;"></p>
		        	<p class="jine" style="margin: 35px 0;font-size: 30px;font-weight: bold;"><span style="font-size: 30px;font-weight: bold;"></span>元</p>
		        	<p class="desc" style="margin: 10px;font-size: 14px;margin-top: 30px;"></p>
		        	<p style="color:silver;padding-top:57px;font-size:12px;">已存入账户余额，可直接消费</p>
		        </div>
		        </div>
		    </div>
		</div>
		<!-- 拆红包 end-->
		<!-- 发红包 start-->
		<div class="modal fade" id="redenvelope" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="top:10%;margin: 0 auto;max-width:420px;">
		        <div class="modal-content" style="border-radius:0px;background-color: transparent;">
		        <div >
		        	<div style="height: 50px;line-height:50px;padding-left: 20px;background: #D85940;">
		        		<p style="color:#FFE8B6;font-size: 14px;">发红包</p>
		        	</div>
		        	 <div class="modal-body" style="background: #F1F1F1;padding: 20px;">
		            	<div style="background: white;border-radius: 3px;padding:16px 10px;">
		            		<span style="display: inline-block;width: 30%" id="redPack"><span style="color: white;background: orange;padding: 2px">拼</span> 总金额</span>
							<input type="number" style="width: 60%;border:0;text-align: right;" placeholder="0.00" value="" />
		            		<span style="display: inline-block;width: 4%">元</span>
		            	</div>
		            	<p style="padding: 12px 2px;font-size: 12px;" id="changgeRedPack">单个金额随机（最少 0.1），<a style="font-size: 12px;color:blue;">改为普通红包</a></p>
		            	<div style="background: white;border-radius: 3px;padding:16px 10px;">
		            		<span style="display: inline-block;width: 30%">红包个数</span>
							<input type="number" style="width: 60%;border: 0;text-align: right;" placeholder="填写个数" value="" />
		            		<span style="display: inline-block;width: 4%">个</span>
		            	</div>
		            	<br>
		            	<div style="background: white;border-radius: 3px;padding:16px 10px;">
		            		<span style="display: inline-block;width: 30%">留言</span>
							<input style="width: 64%;border: 0;text-align: right;" placeholder="恭喜发财，大吉大利" />
		            	</div>
		            	<br>
		            	<button class="sqjhb disButton" style="width: 100%;border: 0;height: 40px;line-height: 40px;border-radius:4px;letter-spacing: 2px; ">塞钱进红包</button>
					</div>
		        </div>
		        </div>
		    </div>
		</div>
		<!-- 发红包 end-->		
		</div>
		
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>			
		<!-- <audio id="audioPlay" src="/cp/music/MessageSending.mp3"></audio> -->
		<script src="/kindeditor/kindeditor-all-min.js"></script>
	
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>			
	
	
	
	<!-- 红包详情 -->
<div class="modal fade" id="hongbaoDetaillist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="top:15%;margin: 0 auto;max-width:300px;min-width:300px;">
        <div class="modal-content" style="background-color: transparent;">
        <div style="background: url('../img/redPack/redPack2.png') ;color:#FFE8B6;background-size:100% 100% ;display:flex;flex-direction:column;align-items：center;height: 400px;">
        	<p style="font-size: 12px;padding-top: 3px;text-align: center;">红包详情<button type="button" style="margin-top: -2px;font-size: 27px;" class="close" data-dismiss="modal" aria-hidden="true">×</button></p>
        <!-- 	<img alt="" class="avatar" src="" style="position:fixed;top:5vh;left:50%;margin-left:-5vh; height: 10vh;width: 10vh;margin-top: 6vh;margin-bottom: 4vh;border:3px solid #FFE8B6;border-radius:5px;"><br> -->
        	<p class="nikname" style="font-size:20px;text-align: center;margin:14px;"></p>
        	<p class="desc" style="margin: -8px 16px 16px 16px;font-size: 14px;text-align: center;"></p>
        	<p class="jine" style="margin: 10px 0;text-align: center;"><span style="font-size: 30px;font-weight: bold;"></span></p>
        	<p class="lingquqingkuang" style="margin-left:16px;">领取<span class="yilingqu"></span>/<span class="zonggong"></span>个</p>
        	<div class="lingqurenList" style="overflow-y:auto;-webkit-overflow-scrolling : touch;flex-grow:1;margin-bottom:10%;">
        	</div>
        </div>
        </div>
    </div>
</div>	
	
</body>
	
	
	<script type="text/javascript">
		/* $("#redenvelope").modal("show") */
/* 		shouhongbao  redenvelope  chaihongbao */
	
	$("#svg-i-toggleRedenvelopeTool").on(getEndClickEvent(),function(){
		if ("${user.state}" === "2") {
			showNormalNoticeModal("#div-i-noticeGenDan", "提示", "试玩账号无法发送红包，请先注册为正式会员")
			return
		}
		$("#redenvelope").modal("show")
		$(".div-c-extraTool-active").removeClass("div-c-extraTool-active")
	});
		
	$("#redenvelope button").on(getEndClickEvent(),function(){
		if($(this).attr("class").indexOf("disButton")==-1){
			var a=$("#redenvelope input").eq(2).val()||"恭喜发财，大吉大利";
			var message = "${user.id }" + "k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90uallk45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u"
				+ $("#redenvelope input").eq(0).val()+"BeanRedPackageJa" + $("#redenvelope input").eq(1).val()+"BeanRedPackageJa"
				+ a +"BeanRedPackageJa" + $("#redenvelope a").text()
			websocket.send(message);
			
			var x=message;
			x=x.split("BeanRedPackageJa")
			$("#content-chat").append("<div class='fromchatItem chatItem sendMyMessage sendRedBag'><div class='redbag-wrapper'><span style='color: #008242;' class='date'><span>${user.nicheng }</span><span>" + date() + "</span></span>"
					+"<div class='contentRedPack' style='margin-left:auto;' onclick='shouhongbao("+x[4]+",this)'>" + x[2]+"<br>领取红包<span class='sdhb'>收到红包</span>"
					+"</div></div><img class='touxiang fl' src='/d/cp/${user.avatar }'></img></div>")
			
			$("#redenvelope").modal("hide")
			$(".sqjhb").addClass("disButton").removeClass("actButton");
			$("#redenvelope input").val("")
			$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight);	
		}
	})
	function go(){
			location.href="/sy.do"; 
		}
	//每分钟请求一次系统聊天开关
	setInterval(function() {
				$.ajax({
					url: "/chatroom.do",
					type: "post",
					data: {},
					success: function(data) {
					 	if(data.data==0){
					 		showNormalNoticeModal("#div-i-noticeGenDan", "系统提示：", "聊天室已关闭,3秒后退出")
					 		$(".btn-class-closeFakeModal")[0].style.display="none"
					 			setTimeout(go, 3000); 
						 	}
					}
				})		
			}, 15000)
	
	
	
	$("#shouhongbao .kai").on(getEndClickEvent(),function(){
		if($(this).css("-webkit-transform").indexOf("matrix(1, 0, 0, 1, 0, 0)")){
			$(this).css("-webkit-transform","rotateY(0deg)")
		}else{
			$(this).css("-webkit-transform","rotateY(360deg)")
		}
		window.setTimeout(function(){
			$("#shouhongbao").hide()
			$("#shouhongbao").modal("hide")
			$("#chaihongbao").modal("show")
		},1000);
	})
	
	function decodeAtob(str) {
/* 		var newStr = ""
		var fakeStr = "Q" + str
		for (var i = 0; i < fakeStr.length; i++) {
			if (i != 0 && i % 8 === 0) {
				continue
			}
			newStr += str[i]
		} */
/* 		return atob(newStr.slice(1, newStr.length)) */
		return atob(str)
	}
	
	function shouhongbao(id,this1){
		ajax({
			url:"openredPack.do",
			data:{id:id},
			success:function(data){
				var json=eval('('+data+')');
				var $parentDiv = $(this1).closest(".fromchatItem")
				if(json.message!=""){
					var type =""
					if (json.message === "您已经领取过这个红包") {
						type = "getAlready"
					}
					else if (json.message === "红包已被抢完了") {
						type = "empty"
					}
					if (type === "") {
						showNormalNoticeModal("#div-i-noticeGenDan", "提示：", json.message)
						return
					}
					//showNormalNoticeModal("#div-i-noticeGenDan", "提示：", json.message)
					var lingquString = decodeAtob(json.data.lingqu).replace("0,", "")
					var lingquStr = lingquString.slice(0, lingquString.length - 1).split(",")
					var jineArray = decodeAtob(json.data.redpack).split(",")
					$("#hongbaoDetaillist").find(".yilingqu").text(lingquStr.length)
					$("#hongbaoDetaillist").find(".zonggong").text(jineArray.length)
					$("#hongbaoDetaillist").find(".desc").text(json.data.desc)
 					$.ajax({
							type:"post",
							url: "/u/img.do",
							dataType:"json",
							data:{ "str": lingquString},
							success:function(data){
								var userData = data
								$("#hongbaoDetaillist").find(".lingqurenList").html("")
								$("#hongbaoDetaillist").find(".nikname").text($parentDiv.find(".date").find("span").eq(0).text())
 								for (var i = 0; i < lingquStr.length; i++) {
									for (var j = 0; j < userData.data.length; j++) {
										if (String(userData.data[j].id) === String(lingquStr[i])) {
		 									var html = "<div class='p-c-lingqurenItem'>"+
		 										  "<p class='info'>"+
												  "<img class='lingqurenItemImg' src='/d/cp/" + userData.data[j].avatar + "' >"+
												  "<span class='lingqurenName'>" + userData.data[j].nicheng + "</span>"+
												  "</p>"+
												  "<span class='lingquwrapper'><span class='lingquJinE'>" + Number(jineArray[i]) / 10 + " 元</span></span>"+
												"</div>"	
											$("#hongbaoDetaillist").find(".lingqurenList").append(html)
											break
										}
									}
									if (type === "getAlready") {
										if (String(lingquStr[i]) === "${user.id}") {
											for (var z = 0; z < userData.data.length; z++) {
												if (String(userData.data[z].id) === String(lingquStr[i])) {
													$("#hongbaoDetaillist").find(".jine").find("span").eq(0).removeClass("smaller").text((Number(jineArray[i]) / 10) + "元")
													break
												}
											}										
										}										
									} else if (type === "empty") {
										$("#hongbaoDetaillist").find(".jine").find("span").eq(0).addClass("smaller").text("红包已经被抢光")
									}
								} 
								
								$("#hongbaoDetaillist").modal("show")
							},
							error: function(e) {
								showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络繁忙")
							}
						})
				}else{
					$("#shouhongbao .avatar").attr("src","/d/cp/"+json.data.lingqu)
					$("#shouhongbao .nikname").text(json.data.redpack)
					$("#shouhongbao .type").text("发了一个红包，"+json.data.type)
					$("#shouhongbao .desc").text(json.data.desc)
					$("#chaihongbao .avatar").attr("src","/d/cp/"+json.data.lingqu)
					$("#chaihongbao .nikname").text(json.data.redpack)
					$("#chaihongbao .desc").text(json.data.desc)
					$("#chaihongbao .jine").find("span").eq(0).text(json.data.jine)
					$("#shouhongbao").modal("show")
					$(this1).find(".sdhb").append("　　（已领取）")
				}
			}
		});
	}
	
	var IS_USER_MOVE = false
	$("#changgeRedPack").on("touchstart",function(){
		IS_USER_MOVE = false
	})
	$("#changgeRedPack").on("touchmove",function(){
		IS_USER_MOVE = true
	})		
	$("#changgeRedPack").on(getEndClickEvent(),function(){
		if (IS_USER_MOVE && isMobile()) {
			return
		}		
		$("#redenvelope input").eq(0).val("");
		$("#redenvelope input").eq(1).val("");
		$(".sqjhb").addClass("disButton").removeClass("actButton");
		if($(this).text().indexOf("固定")!=-1){
			$(this).html("单个金额随机（最少 0.1），<a style='font-size: 12px;color:blue;'>改为普通红包</a>");
			$("#redPack").html("<span style='color: white;background: orange;padding: 2px'>拼</span> 总金额");
		}else{
			$(this).html("每人收到固定金额，<a style='font-size: 12px;color:blue;'>改为拼手气红包</a>");
			$("#redPack").html("单个金额");
		}
	});
	
	$("#redenvelope input").on("input",function(){
		var type=$("#redenvelope a").eq(0).text();
		var jine=$("#redenvelope input").eq(0).val().trim();
		var geshu=$("#redenvelope input").eq(1).val().trim();
		var isdy0=(Number(jine)/Number(geshu))>=0.1;
		
		var t=/^[0-9]+$/;
		
		if((geshu!="" && Number(geshu) > 0)&&(jine!="")&&jine>0&&Number(jine) <= 200000&&t.test(geshu)){
			if(type.indexOf("改为普通")!=-1){
				if(isdy0){
					if(${user.balance}<jine){
						$(".sqjhb").addClass("disButton").removeClass("actButton");
						showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "您的余额不足，请充值后再试")
					}else{
						$(".sqjhb").addClass("actButton").removeClass("disButton");
					}
				}else{
					$(".sqjhb").addClass("disButton").removeClass("actButton");
				}
			}else{
				if(${user.balance}<(jine*geshu)){
					$(".sqjhb").addClass("disButton").removeClass("actButton");
					showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "您的余额不足，请充值后再试")
				}else{
					$(".sqjhb").addClass("actButton").removeClass("disButton");
				}
			}
		}else{
			$(".sqjhb").addClass("disButton").removeClass("actButton");
		}
		
	})

	var USER_AVATER_OBJECT = {
/* 			"0": {
				nicheng: "系统",
				avatar: "img/service.png"
			} */
	}
	bindEditContentEvent(function() {
		setContentHeight()
	})
 		var setContentHeight = function() {
 			var allHeight = $(document).height()
 			document.querySelector("#div-i-main").style.height = allHeight + "px"
			var headerHeight = document.querySelector("#header").clientHeight
			var footer = document.querySelector(".sendMessageWrapper").clientHeight
			var restHeight = allHeight - headerHeight - footer
			var chatDiv = document.querySelector("#content-chat")
			chatDiv.style.height = restHeight + "px"
		}
		var websocket = null;
		var websocket1 = null;
		var websocket2 = null;
		//判断当前浏览器是否支持WebSocket
		if ('WebSocket' in window) {
			websocket = new WebSocket(window.location.href.replace("chat/chatAll.do","all").replace("http","ws")+"?name=${user.id }");
			websocket1 = new WebSocket(window.location.href.replace("chat/chatAll.do","all1").replace("http","ws")+"?name=${user.id }");
			websocket2 = new WebSocket(window.location.href.replace("chat/chatAll.do","all2").replace("http","ws")+"?name=${user.id }");
		} else {
			showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "不支持聊天系统")
		};
	
		//连接发生错误的回调方法
		websocket.onerror = function() {
			setMessageInnerHTML("error");
		};
	
		//连接成功建立的回调方法
		websocket.onopen = function(event){
		};
		websocket1.onopen = function(event){
			 websocket1.send("");
		};
		websocket2.onopen = function(event){
			 websocket2.send("");
		};
	
		//接收到消息的回调方法
		websocket.onmessage = function(event) {
			setMessageInnerHTML(event.data)
		};
		websocket1.onmessage = function(event) {
			setMessageInnerHTML(event.data)
		};
		websocket2.onmessage = function(event) {
			setMessageInnerHTML(event.data)
		};
	
		//连接关闭的回调方法
		websocket.onclose = function() {
			setMessageInnerHTML("断开连接，对方将不再收到你的消息");
		};
	
		//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
		window.onbeforeunload = function() {
			websocket1.close();
		};
		/* var AUDIO_SWITCH=false;
		$("body").click(function(){
			if(!AUDIO_SWITCH){
				AUDIO_SWITCH=true;
				var audio = document.getElementById( "audioPlay" );
			    audio.play();
			}
		}) */
		//将消息显示在网页上
		var upDateNewMessage = function(obj, mess) {
			if(mess.indexOf("BeanRedPackageJa")!=-1){
				var x=mess;
				x=x.split("BeanRedPackageJa")
				$("#content-chat").append("<div class='fromchatItem chatItem receiveRedBag'><img class='touxiang fl' src='/d/cp/" + obj.avatar + "'></img><div class='redbag-wrapper'><span class='date'><span>" + obj.nicheng + "</span><span>" + date() + "</span></span>"
						+"<div class='contentRedPack' onclick='shouhongbao("+x[4]+",this)'>" + x[2]+"<br>领取红包<span class='sdhb'>收到红包</span>"
						+"</div></div></div>")
			}else{
				$("#content-chat").append("<div class='fromchatItem chatItem otherMessage'><img class='touxiang fl' src='/d/cp/" + obj.avatar + "'></img><div class='info'><span class='date'><span>" + obj.nicheng + "</span><span>" + date() + "</span></span>" + "<div class='content'>" + mess + "</div></div>"
						+"</div>")
			}
			
			$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight)			
		}
		function msTotime(ms){
			ms=Number(ms);
			var hour=Math.floor((ms/(60*60*1000)));
			var min=Math.floor((ms/60000));
			var second=(ms%60000)/1000;
			return bu0(hour)+":"+bu0(min)+":"+bu0(second)
		}
		function bu0(str){
			if(Number(str)<10){
				return "0"+str;
			}else{
				return str;
			}
		}
		if(Number(${i})==-1){
			$(".djs").addClass("hidden")
		}else{
			$(".djs").removeClass("hidden")
		}
		var time1=Number(${i})-1000;
		if(time1!=null){
			var daojishi1 = window.setInterval(function() {
				time1-=1000
				$(".daojishi").text(msTotime(time1))
				if(time1<1000){
					clearInterval(daojishi1)
				}
			}, 1000)
		}
		
		
		function setMessageInnerHTML(message) {
			/* var audio = document.getElementById( "audioPlay" );
		    audio.play(); */
			if(message.indexOf("Bean1RedPackageJa")!=-1){
				message=message.replace("Bean1RedPackageJa","")
				$(".contentRedPack").eq($(".contentRedPack").length-1).attr("onclick","shouhongbao("+message+",this)")
			}else if(message.indexOf("BeanRedPackageJa")!=-1){
				if(Number(message.replace("BeanRedPackageJa",""))==0){
					$(".djs").addClass("hidden")
				}else{
					$(".djs").removeClass("hidden")
					var mess = message.split("k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u");
					var id = mess[1]
					var time=0;
					time=mess[2];
					if(time!=null){
						var daojishi = window.setInterval(function() {
							time-=1000
							$(".daojishi").text(msTotime(time))
							if(time<1000){
								clearInterval(daojishi)
							}
						}, 1000)
					}
					
					
					if (USER_AVATER_OBJECT[id] == undefined) {
						var urlPath = "/getUserById.do"
						var newRequest = {
							url: urlPath,
							type: "post",
							data: {
								id: id
							},
							success: function(data) {
								var newData = JSON.parse(data)
								upDateNewMessage(newData.data, mess[0])
								var newOBJ = {
									nicheng: newData.data.nicheng,
									avatar: newData.data.avatar
								}
								USER_AVATER_OBJECT[newData.data.id] = newOBJ
							},
							error: function(status) {
								
							}
						}
						ajax(newRequest)				
					} else {
						upDateNewMessage(USER_AVATER_OBJECT[id], mess[0])
					}
				}
			}else{
				var mess = message.split("k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u");
				var id = mess[1]
				if (USER_AVATER_OBJECT[id] == undefined) {
					var urlPath = "getUserById.do"
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {
							id: id
						},
						success: function(data) {
							var newData = JSON.parse(data)
							upDateNewMessage(newData.data, mess[0])
							var newOBJ = {
								nicheng: newData.data.nicheng,
								avatar: newData.data.avatar
							}
							USER_AVATER_OBJECT[newData.data.id] = newOBJ
						},
						error: function(status) {
							
						}
					}
					ajax(newRequest)				
				} else {
					upDateNewMessage(USER_AVATER_OBJECT[id], mess[0])
				}
			}
			
		};

		//关闭连接
		function closeWebSocket() {
			websocket.close();
			back()
		};
		//发送消息
		
		
	function createMyMessage(obj) {
		$("#content-chat").append("<div class='fromchatItem chatItem sendMyMessage'><div class='info'><span style='color: #008242;' class='date'><span>" + obj.nicheng + "</span><span>" + obj.creattime.split(" ")[1]  + "</span></span>" + "<div class='content'>"+ obj.desc + "</div></div><img class='touxiang fl' src='/d/cp/" + obj.avatar + "'></img>"
				+"</div>")			
	}	
		
	function createOtherMessage(obj) {
		$("#content-chat").append("<div class='fromchatItem chatItem otherMessage'><img class='touxiang fl' src='/d/cp/" + obj.avatar + "'></img><div class='info'><span class='date'><span>" + obj.nicheng + "</span><span>" + obj.creattime.split(" ")[1]  + "</span></span>" + "<div class='content'>" + obj.desc + "</div></div>"
			+"</div>")		
	}			
		
	function send() {
		var messageValue = $(".div-c-editArea").html().trim()
		if (messageValue == "") {
			return
		}
		var message = "${user.id }" + "k45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90uallk45jk459fgjdf986kjh98fgdkj3i45y89fdh4598hp90u"+ messageValue
		websocket.send(message);
		$("#content-chat").append("<div class='fromchatItem chatItem sendMyMessage'><div class='info'><span style='color: #008242;' class='date'><span>${user.nicheng}</span><span>" + date() + "</span></span>" + "<div class='content'>"+ messageValue + "</div></div><img class='touxiang fl' src='/d/cp/${user.avatar }'></img>"
				+"</div>")
		$(".div-c-editArea").html("")
		$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight);
		$(".div-c-editArea")[0].blur()
		$(".div-c-extraTool-active").removeClass("div-c-extraTool-active")
		$(".w-e-panel-container-active").removeClass("w-e-panel-container-active")
		$(".editarea-wrapper").addClass("editarea-wrapper-active")
			//$('#content-chat').scrollTop( $('#content-chat')[0].scrollHeight+"px" );
	};
		/* 补0 */
		function checkTime(i) {
			if (i < 10) {
				i = "0" + i;
			}
			return i;
		}
		function date() {
			var today = new Date;
			var y = checkTime(today.getFullYear());
			var mm = checkTime(today.getMonth() + 1);
			var d = checkTime(today.getDate());
			var h = checkTime(today.getHours());
			var m = checkTime(today.getMinutes());
			var s = checkTime(today.getSeconds());
			//y = y + '-' + mm + '-' + d + ' ' + h + ':' + m + ':' + s;
			y = h + ':' + m + ':' + s;
			return y;
		}
		
		function createMyPinShouQiHongBao(item) {
			 $("#content-chat").append("<div class='fromchatItem chatItem sendMyMessage sendRedBag'><div class='redbag-wrapper'><span style='color: #008242;' class='date'><span>" + item.nicheng + "</span><span>" + item.creattime.split(" ")[1] + "</span></span>"
			+"<div class='contentRedPack' style='margin-left:auto;' onclick='shouhongbao("+ item.id +",this)'>" + item.desc +"<br>领取红包<span class='sdhb'>收到红包</span>"
			+"</div></div><img class='touxiang fl' src='/d/cp/" + item.avatar + "'></img></div>")			 
		}
		
		function createOtherShouQiHongBao(item) {
			$("#content-chat").append("<div class='fromchatItem chatItem receiveRedBag'><img class='touxiang fl' src='/d/cp/" + item.avatar + "'></img><div class='redbag-wrapper'><span class='date'><span>" + item.nicheng + "</span><span>" + item.creattime.split(" ")[1] + "</span></span>"
			+"<div class='contentRedPack' onclick='shouhongbao("+ item.id +",this)'>" + item.desc +"<br>领取红包<span class='sdhb'>收到红包</span>"
			+"</div></div></div>")			
		}
		
		function getLastChatData() {
			$.ajax({
				type:"post",
				url: "/u/Querychatrecord.do",
				dataType:"json",
				data:{},
				success:function(data){
					var myId = data.message
					for (var i = 0; i < data.data.length; i++) {
						var item = data.data[i]
						item.desc = item.desc
						if (item.type === "拼手气红包" || item.type === "固定红包") {
							if (myId === String(item.userid)) {
								createMyPinShouQiHongBao(item)
							} else {
								createOtherShouQiHongBao(item)
							}							
						}
						else {
							if (myId === String(item.userid)) {
								createMyMessage(item)
							} else {
								createOtherMessage(item)
							}							
						}
					}
					$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight)	
				}
			})			
		}
		function getLastChatData1() {
			if(Number(${i})!=0){
				setInterval(function() {
					$.ajax({
						type:"post",
						url: "LatestRedenvelopes.do",
						dataType:"json",
						data:{},
						success:function(data){
							var myId = data.message
							var item = data.data
							item.desc = item.desc
							if (item.type === "拼手气红包" || item.type === "固定红包") {
								if (myId === String(item.userid)) {
									createMyPinShouQiHongBao(item)
								} else {
									createOtherShouQiHongBao(item)
								}							
							}
							$('#content-chat').scrollTop($('#content-chat')[0].scrollHeight)	
						}
					})			
				},Number(${i}) )
			}
		}
		
/* 		$.ajax({
			type:"post",
			url: getBase()+"/u/img.do",
			dataType:"json",
			data:{ "str": "1,2,"},
			success:function(data){
				var myId = data.message
			},
			error: function(e) {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络繁忙")
			}
		})	 */			
		
		stopUserScaleScreenIOS()
		setContentHeight()
		getLastChatData()
		//getLastChatData1()
		$(".span-c-sendNewMessage").on(getEndClickEvent(), function(event) {
			ajax({
				url:"Verification.do",
				type:"get",
				success:function(data){
					var json=eval('('+data+')')
					if(json.data=="0"){
						showNormalNoticeModal("#div-i-noticeGenDan", "提示", "历史充值金额未达到"+json.message+",您不能发言，请达到要求后再来")
						return
					}
					else{
						if ("${user.state}" === "2") {
							showNormalNoticeModal("#div-i-noticeGenDan", "提示", "试玩账号无法发送信息，请先注册为正式会员")
							return
						}
						if ($(".div-c-editArea").html().length > 1500) {
							showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "超出最大字数")
							return
						}			
						send()
					}
				}
			})
		})
		window.onbeforeunload = function (e) {
			closeWebSocket()
		};
		</script>
</html>